<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Radar Charts</title>
    <!-- 引入 ECharts 库 -->

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script type="text/javascript" src="js/Plugin/echarts.min.js"></script>
    <style>
     body, html {
            height: 100%;
            margin: 0;
        }

    #provinceSelect2 {
      background: linear-gradient(to right,#FFE434, rgb(255, 145, 124));
      color: #777777;
      padding: 5px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      position: fixed;
      right: 5px; /* 距离右边缘的距离 */
    }

     #provinceSelect1 {
      background: linear-gradient(to right,#67f990, #56a3f1);
      color: #777777;
      padding: 5px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

     .radar-container {
      display: flex;
         flex-direction: column; /* 垂直方向排列 */

      margin-bottom: 20px; /* 调整雷达图之间的间距 */
    }

    /* 设置雷达图的样式 */
    canvas {
      border: 1px solid #ddd; /* 为了更好的可视化，添加边框 */
    }

     h1 {
         text-align: center;
         font-size: 0.9em; /* 你可以根据需要调整大小 */
     }



  </style>
</head>
<body >



<div>
                <label for="provinceSelect1"  ></label>
                <label for="provinceSelect2"  ></label>
                <form autocomplete="off">
                    <!-- 两个雷达图的选择 -->
                        <select id="provinceSelect1" onchange="changeRadarMap()" >
                            <option value="上海" selected> 上海 </option>
                            <option value="云南"> 云南 </option>
                            <option value="内蒙古"> 内蒙古 </option>
                            <option value="北京"> 北京 </option>
                            <option value="台湾"> 台湾 </option>
                            <option value="吉林"> 吉林 </option>
                            <option value="四川"> 四川 </option>
                            <option value="天津"> 天津 </option>
                            <option value="宁夏"> 宁夏 </option>
                            <option value="安徽"> 安徽 </option>
                            <option value="山东"> 山东 </option>
                            <option value="山西"> 山西 </option>
                            <option value="广东"> 广东 </option>
                            <option value="广西"> 广西 </option>
                            <option value="新疆"> 新疆 </option>
                            <option value="江苏"> 江苏 </option>
                            <option value="江西"> 江西 </option>
                            <option value="河北"> 河北 </option>
                            <option value="河南"> 河南 </option>
                            <option value="浙江"> 浙江 </option>
                            <option value="海南"> 海南 </option>
                            <option value="湖北"> 湖北 </option>
                            <option value="湖南"> 湖南 </option>
                            <option value="澳门"> 澳门 </option>
                            <option value="甘肃"> 甘肃 </option>
                            <option value="福建"> 福建 </option>
                            <option value="西藏"> 西藏 </option>
                            <option value="贵州"> 贵州 </option>
                            <option value="辽宁"> 辽宁 </option>
                            <option value="重庆"> 重庆 </option>
                            <option value="陕西"> 陕西 </option>
                            <option value="青海"> 青海 </option>
                            <option value="香港"> 香港 </option>
                            <option value="黑龙江"> 黑龙江 </option>
                        </select>
                        <select id="provinceSelect2" onchange="changeRadarMap()" >
                            <option value="上海"> 上海 </option>
                            <option value="云南"> 云南 </option>
                            <option value="内蒙古"> 内蒙古 </option>
                            <option value="北京" selected> 北京 </option>
                            <option value="台湾"> 台湾 </option>
                            <option value="吉林"> 吉林 </option>
                            <option value="四川"> 四川 </option>
                            <option value="天津"> 天津 </option>
                            <option value="宁夏"> 宁夏 </option>
                            <option value="安徽"> 安徽 </option>
                            <option value="山东"> 山东 </option>
                            <option value="山西"> 山西 </option>
                            <option value="广东"> 广东 </option>
                            <option value="广西"> 广西 </option>
                            <option value="新疆"> 新疆 </option>
                            <option value="江苏"> 江苏 </option>
                            <option value="江西"> 江西 </option>
                            <option value="河北"> 河北 </option>
                            <option value="河南"> 河南 </option>
                            <option value="浙江"> 浙江 </option>
                            <option value="海南"> 海南 </option>
                            <option value="湖北"> 湖北 </option>
                            <option value="湖南"> 湖南 </option>
                            <option value="澳门"> 澳门 </option>
                            <option value="甘肃"> 甘肃 </option>
                            <option value="福建"> 福建 </option>
                            <option value="西藏"> 西藏 </option>
                            <option value="贵州"> 贵州 </option>
                            <option value="辽宁"> 辽宁 </option>
                            <option value="重庆"> 重庆 </option>
                            <option value="陕西"> 陕西 </option>
                            <option value="青海"> 青海 </option>
                            <option value="香港"> 香港 </option>
                            <option value="黑龙江"> 黑龙江 </option>
                        </select>
 </form>
</div>

<div class="radar-container">
    <!-- 第一个雷达图 -->
    <h1> temperature contrast </h1>
    <canvas id="radarChart1" width="235" height="220"></canvas>
    <!-- 第二个雷达图 -->
     <h1>sunshine duration comparison</h1>
    <canvas id="radarChart2" width="235" height="220"></canvas>
  </div>

<script type="text/javascript">
// 假设 data 是你的雷达图数据，radarProvince1 和 radarProvince2 是两个省份的标识
// 请根据你的实际数据结构进行调整

// 初始化 ECharts 实例，分别为两个雷达图
var chart1 = echarts.init(document.getElementById('radarChart1'));
var chart2 = echarts.init(document.getElementById('radarChart2'));

const data1 = {'安徽': [4.1,3.8,12.7,17.1,20.7,27.0,28.8,29.6,23.4,16.5,13.5],'北京': [-4.7,-3.6,4.3,12.7,18.6,23.0,24.9,23.2,20.5,11.0,4.0],'福建': [10.4,8.1,15.8,17.7,19.2,23.4,27.7,27.8,25.6,21.1,17.5],'甘肃': [-7.0,-7.5,3.8,7.5,13.6,18.7,20.2,19.4,14.5,6.5,-0.3],'广东': [14.2,11.2,19.4,20.8,22.6,25.8,27.8,27.0,26.9,23.2,20.5],'广西': [11.4,8.6,18.6,19.8,21.5,25.4,26.9,26.7,25.7,21.6,19.6],'贵州': [5.0,3.6,13.5,14.9,17.0,21.8,24.3,25.1,21.1,16.1,13.5],'海南': [20.1,18.5,23.5,23.8,25.3,28.0,27.6,27.0,26.5,23.9,23.7],'河北': [-5.3,-4.7,4.3,12.2,17.4,22.8,23.8,22.6,19.4,10.2,3.8],'河南': [1.7,3.1,11.4,17.2,21.0,28.5,27.1,27.7,22.9,14.9,11.1],'黑龙江': [-19.0,-14.0,-3.5,5.2,11.7,18.4,22.2,18.6,13.9,3.6,-6.2],'湖北': [3.7,3.8,12.6,16.5,19.4,25.6,27.5,28.6,23.1,16.2,13.0],'湖南': [5.6,4.5,14.3,17.5,19.7,25.3,28.1,29.9,25.9,18.9,15.6],'吉林': [-14.5,-11.5,-0.9,8.1,13.4,18.2,22.2,19.7,16.0,6.1,-1.9],'江苏': [3.5,3.7,11.4,16.2,20.7,27.0,28.6,29.3,22.5,16.4,13.5],'江西': [7.5,5.7,15.5,18.0,20.4,25.2,29.3,30.8,26.6,20.3,16.8],'辽宁': [-8.7,-6.7,2.2,10.4,16.0,20.1,23.7,22.2,18.2,9.1,2.2],'内蒙古': [-13.2,-11.8,-0.2,7.3,14.0,20.3,22.9,19.7,15.9,5.0,-3.9],'宁夏': [-4.0,-4.5,7.3,11.0,16.6,22.4,23.1,22.1,16.8,9.9,2.7],'青海': [-14.2,-14.6,-3.5,-1.3,3.7,7.8,10.4,11.8,4.8,-1.9,-8.0],'山东': [-0.2,1.1,8.8,15.6,20.8,26.1,26.2,26.0,21.6,13.8,9.8],'山西': [-4.2,-3.8,5.5,11.4,15.5,22.4,21.8,21.2,16.5,8.9,3.6],'陕西': [-1.1,-1.0,8.7,12.9,17.1,23.3,23.4,23.6,17.5,11.0,6.1],'上海': [6.0,5.2,11.9,15.8,19.4,25.1,29.5,30.0,23.6,18.3,15.7],'四川': [-4.1,-4.5,5.3,6.4,10.7,14.9,17.5,19.0,12.7,8.5,4.9],'台湾': [14.4,14.0,17.8,19.1,20.8,23.3,24.5,24.1,22.7,21.0,19.9],'天津': [-2.4,-1.3,6.5,15.7,21.0,25.2,26.8,25.6,22.6,13.8,7.2],'西藏': [-15.9,-15.5,-5.8,-2.0,1.9,6.2,8.5,8.3,3.7,-4.3,-9.4],'香港': [16.8,14.2,20.4,22.1,23.8,27.0,28.6,27.6,27.7,24.5,22.0],'新疆': [-9.4,-7.9,3.0,10.0,16.8,20.1,22.1,19.7,16.1,5.5,-2.8],'云南': [7.9,7.6,15.5,15.4,16.8,18.7,20.3,20.0,17.9,15.6,13.7],'浙江': [6.2,4.6,13.1,16.3,18.6,24.1,29.3,29.9,23.5,17.9,15.4],'重庆': [5.4,4.7,13.6,15.8,18.6,23.6,26.6,29.2,21.6,16.5,13.4]};
 const data2 = {'上海': [622, 664, 719, 776, 824, 848, 837, 796, 741, 685, 635], '云南': [646, 679, 720, 764, 801, 820, 811, 779, 738, 694, 656], '内蒙古': [577, 638, 716, 798, 867, 903, 886, 826, 748, 667, 596], '北京': [582, 641, 716, 795, 862, 897, 881, 823, 748, 669, 600], '台湾': [651, 681, 721, 762, 796, 814, 806, 776, 737, 696, 660], '吉林': [560, 628, 715, 806, 884, 924, 905, 838, 751, 661, 581], '四川': [625, 666, 719, 775, 822, 845, 834, 794, 741, 685, 637], '天津': [586, 643, 717, 793, 858, 892, 876, 820, 747, 671, 604], '宁夏': [589, 645, 717, 792, 855, 888, 873, 818, 746, 672, 606], '安徽': [620, 663, 719, 777, 826, 851, 840, 797, 742, 684, 633], '山东': [598, 650, 717, 788, 847, 877, 863, 812, 745, 675, 614], '山西': [592, 647, 717, 790, 852, 884, 869, 816, 746, 673, 609], '广东': [653, 683, 721, 761, 795, 812, 804, 775, 737, 697, 662], '广西': [654, 683, 721, 760, 794, 810, 802, 774, 736, 697, 663], '新疆': [560, 629, 715, 806, 883, 924, 905, 837, 751, 661, 581], '江苏': [619, 662, 719, 778, 827, 852, 841, 798, 742, 683, 632], '江西': [633, 670, 719, 771, 814, 836, 826, 789, 740, 689, 644], '河北': [592, 647, 717, 791, 853, 885, 870, 816, 746, 673, 608], '河南': [607, 655, 718, 783, 838, 866, 853, 806, 744, 679, 622], '浙江': [626, 667, 719, 774, 820, 843, 833, 793, 741, 686, 638], '海南': [664, 689, 722, 756, 784, 799, 792, 768, 735, 701, 672], '湖北': [625, 666, 719, 775, 821, 845, 834, 794, 741, 686, 637], '湖南': [635, 672, 720, 770, 812, 833, 823, 787, 739, 689, 646], '澳门': [656, 685, 721, 759, 792, 808, 800, 773, 736, 698, 665], '甘肃': [601, 652, 718, 786, 844, 874, 860, 810, 745, 676, 616], '福建': [642, 676, 720, 766, 805, 824, 815, 782, 738, 692, 653], '西藏': [629, 668, 719, 773, 818, 840, 830, 791, 740, 687, 641], '贵州': [641, 675, 720, 767, 807, 826, 817, 783, 739, 692, 651], '辽宁': [572, 635, 716, 800, 872, 910, 892, 830, 749, 665, 591], '重庆': [629, 668, 719, 773, 817, 840, 829, 791, 740, 687, 641], '陕西': [609, 657, 718, 782, 836, 864, 851, 804, 743, 679, 624], '青海': [598, 651, 717, 787, 847, 877, 863, 812, 745, 675, 614], '香港': [656, 684, 721, 760, 792, 808, 801, 773, 736, 698, 664], '黑龙江': [548, 622, 714, 812, 895, 939, 918, 846, 753, 657, 571]};

//默认雷达图省份
    var radarProvince1 = '上海';
    var radarProvince2 = '北京';
    var dataMax1 = [
  {
    name: 'Jan',
    min: -19.0,
    max: 20.1
  },
  {
    name: 'Feb',
    min: -15.5,
    max: 18.5
  },
  {
    name: 'Mar',
    min: -5.8,
    max: 23.5
  },
  {
    name: 'Apr',
    min: -2.0,
    max: 23.8
  },
  {
    name: 'May',
    min: 1.9,
    max: 25.3
  },
  {
    name: 'Jun',
    min: 6.2,
    max: 28.5
  },
  {
    name: 'Jul',
    min: 8.5,
    max: 29.5
  },
  {
    name: 'Aug',
    min: 8.3,
    max: 30.8
  },
  {
    name: 'Sept',
    min: 3.7,
    max: 27.7
  },
  {
    name: 'Oct',
    min: -4.3,
    max: 24.5
  },
  {
    name: 'Nov',
    min: -9.4,
    max: 23.7,
  }
]
    var dataMax2 = [
    {
      name: 'Jan',
      min: 448,
      max: 714,
    },
    {
      name: 'Feb',
      min: 522,
      max: 739,
    },
    {
      name: 'Mar',
      min: 614,
      max: 772,
    },
    {
      name: 'Apr',
      min: 656,
      max: 862,
    },
    {
      name: 'May',
      min: 684,
      max: 945,
    },
    {
      name: 'Jun',
      min: 699,
      max: 989,
    },
    {
      name: 'Jul',
      min: 692,
      max: 968,
    },
    {
      name: 'Aug',
      min: 668,
      max: 896,
    },
    {
      name: 'Sep',
      min: 635,
      max: 803,
    },
    {
      name: 'Oct',
      min: 557,
      max: 751,
    },
    {
      name: 'Nov',
      min: 471,
      max: 722,
    },
  ]

function changeRadarMap(){
    radarProvince1 = document.getElementById('provinceSelect1').value;
    radarProvince2 = document.getElementById('provinceSelect2').value;

    option1.series[0].data[0].name = radarProvince1;
    option1.series[0].data[0].value =data1[radarProvince1];
    option1.series[0].data[1].name = radarProvince2;
    option1.series[0].data[1].value =data1[radarProvince2];

    option2.series[0].data[0].name = radarProvince1;
    option2.series[0].data[0].value =data2[radarProvince1];
    option2.series[0].data[1].name = radarProvince2;
    option2.series[0].data[1].value =data2[radarProvince2];

    chart1.setOption(option1,true);
    chart2.setOption(option2,true);
}

// 配置项
var option1={

  radar:{
      indicator:dataMax1,

      shape: 'circle',

       splitArea: {
        areaStyle: {
          color: ['#77a9ea', '#268cc3', '#64AFE9', '#428BD4'],
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(71,174,217,1)'
        }
      },
       splitLine: {
        lineStyle: {
          color: 'rgba(211, 253, 250, 0.8)'
        }
      },


    },


    series:[
      {
        type: 'radar',
        data: [
          {
            value: data1[radarProvince1],
            name: radarProvince1,
            itemStyle: {
              color: '#67f990' // 设置节点的颜色
            },
            emphasis: {
              label: {
              show: true, // 显示标签
              formatter: function (params) {
                return `${params.value}°C`;
                },
              color: '#b4ffaf',
              },
              itemStyle: {
              borderWidth: 3,
              }
            }
          },

          {
            value: data1[radarProvince2],
            name: radarProvince2,
            itemStyle: {
            color: '#FFE434' // 设置节点的颜色
            },
            emphasis: {
              label: {
              show: true, // 显示标签
              formatter: function (params) {
                return `${params.value}°C`;
                },
              color: '#ffddc0',
              },
              itemStyle: {
              borderWidth: 3,
              }
            }
          }
        ],


      },
    ],

};

var option2 ={
    radar:{
      indicator:dataMax2,
      axisName: {
        color: '#fff',
        backgroundColor: '#666',
        borderRadius: 3,
        padding: [3, 5]
      },
      axisLine: {
        lineStyle: {
          color: 'rgb(103,103,103)'
        }
      },
    },

    series:[
      {
        type: 'radar',
        data: [
          {
            value: data2[radarProvince1],
            name: radarProvince1,
            symbol: 'rect',
            symbolSize: 6,
            lineStyle: {
              type: 'dashed'
            },
            // label: {
            //   show: true,
            //   formatter: function (params) {
            //     return params.value;
            //   }
            // },
            itemStyle: {
              color: '#56a3f1'
            },

             emphasis: {
              label: {
              show: true, // 显示标签
              formatter: function (params) {
                return `${params.value}min`;
                },
              color: '#0783ff',
              },
              itemStyle: {
              borderWidth: 3,
              }
            }


          },

          {
            value: data2[radarProvince2],
            name: radarProvince2,
            symbol: 'circle',
            areaStyle: {
              color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                {
                  color: 'rgba(255, 145, 124, 0.1)',
                  offset: 0
                },
                {
                  color: 'rgba(255, 145, 124, 0.9)',
                  offset: 1
                }
              ])
            },

              emphasis: {
              label: {
              show: true, // 显示标签
              formatter: function (params) {
                return `${params.value}min`;
                },
              color: 'rgba(253,82,49,0.9)',
              },
              itemStyle: {
              borderWidth: 3,
              }
            }
          }
        ]
      }
    ],
  }

// 使用配置项和数据显示雷达图
chart1.setOption(option1);
chart2.setOption(option2);

changeRadarMap();

</script>


</body>
</html>
